/********************flexbox********************/
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-center { justify-content: center; align-items: center; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }
.flex-grow { flex: 1 0; }
.self-align-center { align-self: center; }

/********************primary********************/
.full-width { width: 100%; }
.full-height { height: 100%; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.left { float: left; }
.right { float: right; }
.overflow-hide { overflow: hidden; }
.border-box { box-sizing: border-box; }
.pointer { cursor: pointer; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.break-word { word-break: break-all; }
.lh-10 { line-height: 1.0; }
.lh-12 { line-height: 1.2; }
.lh-15 { line-height: 1.5; }
.lh-20 { line-height: 2.0; }

/********************font********************/
.font-12 { font-size: 12px; }
.font-14 { font-size: 14px; }
.font-16 { font-size: 16px; }
.font-18 { font-size: 18px; }
.font-20 { font-size: 20px; }
.font-22 { font-size: 22px; }
.font-24 { font-size: 24px; }
.font-26 { font-size: 26px; }
.font-28 { font-size: 28px; }
.font-30 { font-size: 30px; }
.font-32 { font-size: 32px; }
.font-w-300 { font-weight: 300; }
.font-w-400 { font-weight: 400; }
.font-w-500 { font-weight: 500; }
.font-w-600 { font-weight: 600; }
.font-w-700 { font-weight: 700; }
.bold { font-weight: bold; }

/********************margin and padding********************/
.margin-5 { margin: 5px; }
.margin-10 { margin: 10px; }
.margin-15 { margin: 15px; }
.margin-20 { margin: 20px; }
.mt-5 { margin-top: 5px; }
.mr-5 { margin-right: 5px; }
.mb-5 { margin-bottom: 5px; }
.ml-5 { margin-left: 5px; }
.mt-10 { margin-top: 10px; }
.mr-10 { margin-right: 10px; }
.mb-10 { margin-bottom: 10px; }
.ml-10 { margin-left: 10px; }
.mt-20 { margin-top: 20px; }
.mr-20 { margin-right: 20px; }
.mb-20 { margin-bottom: 20px; }
.ml-20 { margin-left: 20px; }
.padding-5 { padding: 5px; }
.padding-10 { padding: 10px; }
.padding-20 { padding: 20px; }
.px-5 { padding-left: 5px; padding-right: 5px; }
.py-5 { padding-top: 5px; padding-bottom: 5px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }
.pt-5 { padding-top: 5px; }
.pr-5 { padding-right: 5px; }
.pb-5 { padding-bottom: 5px; }
.pl-5 { padding-left: 5px; }
.pt-10 { padding-top: 10px; }
.pr-10 { padding-right: 10px; }
.pb-10 { padding-bottom: 10px; }
.pl-10 { padding-left: 10px; }
.pt-20 { padding-top: 20px; }
.pr-20 { padding-right: 20px; }
.pb-20 { padding-bottom: 20px; }
.pl-20 { padding-left: 20px; }

.mw-100 { max-width: 100px; }
.mw-150 { max-width: 150px; }
.mw-200 { max-width: 200px; }
.mw-250 { max-width: 250px; }
